<template>
  <div id="hot-music">
    <div class="hot-log">
      <span class="name">云音乐</span>
      <img :src="coverImgUrl" />
      <span class="update">更新日期：{{updateTime}}</span>
    </div>
    <div class="hot">
      <music-bar
        v-for="(item,index) in hotMusic"
        :key="index"
        :show-left-top="true"
        :left-num="index"
        :music-info="item"
      ></music-bar>
    </div>
  </div>
</template>

<script>
import { request } from "@/network";
import { MusicInfo } from "@/assets/js/MusicInfo";

import MusicBar from "@/components/musicbar/MusicBar";
export default {
  data() {
    return {
      playList: null,
    };
  },
  created() {
    this.getHotMusic();
  },
  computed: {
    updateTime() {
      if (this.playList) {
        const utime = new Date(this.playList.updateTime);
        return utime.getMonth() + 1 + "月" + utime.getDate() + "日";
      }
      return null;
    },
    hotTop_20() {
      if (this.playList) {
        return this.playList.tracks.filter((val, index, arr) => index < 20);
      }
    },
    coverImgUrl() {
      if (this.playList) {
        return this.playList.coverImgUrl;
      } else {
        return null;
      }
    },
    // 热歌榜单20条
    hotMusic() {
      if (this.playList) {
        const top20 = this.playList.tracks.filter(
          (val, index, arr) => index < 20
        );
        let result = [];
        for (let item of top20) {
          const obj = {};
          obj.musicName = item.name;
          obj.author = item.ar[0].name;
          obj.songs = item.al.name;
          obj.iid = item.id;
          result.push(new MusicInfo(obj));
        }
        return result;
      } else {
        return null;
      }
    },
  },
  methods: {
    // 获取云音乐热歌榜单
    getHotMusic() {
      request({
        url: "/playlist/detail?id=3778678",
      }).then(
        (res) => {
          this.playList = res.playlist;
          console.log(this.playList);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 返回排序
    sort(index) {
      index++;
      if (index < 11) {
        return "0" + index;
      } else {
        return index;
      }
    },
  },
  components: {
    MusicBar,
  },
};
</script>

<style scoped>
#hot-music {
  padding-top: 40px;
}
.hot-log {
  position: relative;
}
.hot-log img {
  height: 160px;
  width: 100%;
}
.hot-log .name {
  position: absolute;
  top: 15px;
  left: 20px;
  color: #fff;
  font-size: 15px;
  font-style: italic;
}
.hot-log .update {
  position: absolute;
  top: 37px;
  left: 20px;
  color: #fff;
  font-size: 13px;
}

.hot-music-item {
  display: flex;
  align-items: center;
  height: 55px;
}
.sgfl-cred {
  width: 40px;
  font-size: 17px;
  color: #999;
  line-height: 55px;
  text-align: center;
}
.top {
  color: #df3436;
}
.sgfl-info-lf {
  flex: 1;
  padding: 6px 0;
  height: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.sgfl-info-ri {
  padding: 0 10px;
  height: 55px;
  line-height: 55px;
}
.sgfl-info-ri span {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=")
    no-repeat;
  background-size: 166px 97px;
  background-position: -24px 0;
}
.sghot {
  display: inline-block;
  width: 12px;
  height: 8px;
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
    no-repeat;
  background-size: 166px 97px;
}
.sgtl {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  color: #333;
}
.sginfo {
  font-size: 12px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
</style>